<template>
  <div>   
	    <!--客服介入详情弹框-->
		<van-popup
		  v-model="showStatus"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		  class="popup"
		  :overlay="false"
		>   
			<van-nav-bar
			  title="客服介入进度详情"
			  left-arrow			  
			>		
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showStatus=false"/>
		    </van-nav-bar>	
		    
		    <div class="next"></div>
		    
		    
		    <div class="steps_wrap" v-if="info.processState==0">
					<van-steps direction="vertical" :active="0" active-color="#FFD630" class="">
					  <van-step>
					    <div class="word1">买家申请客服介入</div>
					    <div class='word2'>{{info.addtime}}</div>
					  </van-step>
					  <van-step>
					    <div class="word1">等待买家上传凭证</div>
					    <div>
					    	<div>
						    	<span class='word3'>请上传凭证：【退货快递单和双方协商一致的 聊天记录】</span>
						    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
					    	</div>
					    	<div class='word3'>提交后小二将根据您的凭证做出处理 逾期未提交，申请将自动关闭</div>
					    </div>
					  </van-step>		  				  
					  <van-step>
					    <div class='word1'>卖家处理</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>分配小二</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>集市小法庭处理中</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>维权完结</div>
					  </van-step>			  
					</van-steps>
			  </div>		    
		    

		    <div class="steps_wrap" v-if="info.processState==1">
					<van-steps direction="vertical" :active="1" active-color="#FFD630" class="">
					  <van-step>
					    <div class="word1">买家申请客服介入</div>
					    <div class='word2'>{{info.addtime}}</div>
					  </van-step>
					  <van-step>
					    <div class="word1">等待买家上传凭证</div>
					    <div>
					    	<div>
						    	<span class='word3'>请上传凭证：【退货快递单和双方协商一致的 聊天记录】</span>
						    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
					    	</div>
					    	<div class='word3'>提交后小二将根据您的凭证做出处理 逾期未提交，申请将自动关闭</div>
					    </div>
					  </van-step>		  				  
					  <van-step>
					    <div class='word1'>卖家处理</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>分配小二</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>集市小法庭处理中</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>维权完结</div>
					  </van-step>			  
					</van-steps>
			  </div>		
		    
		    <div class="steps_wrap" v-if="info.processState==3">
					<van-steps direction="vertical" :active="2" active-color="#FFD630" class="">
					  <van-step>
					    <div class="word1">买家申请客服介入</div>
					    <div class='word2'>{{info.addtime}}</div>
					  </van-step>
					  <van-step>
					    <div class="word1">等待买家上传凭证</div>
					    <div>
					    	<div>
						    	<span class='word3'>请上传凭证：【退货快递单和双方协商一致的 聊天记录】</span>
						    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
					    	</div>
					    	<div class='word3'>提交后小二将根据您的凭证做出处理 逾期未提交，申请将自动关闭</div>
					    </div>
					  </van-step>		  				  
					  <van-step>
					    <div class='word1'>卖家处理</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>分配小二</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>集市小法庭处理中</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>维权完结</div>
					  </van-step>			  
					</van-steps>
			  </div>		
		    		    
		    		    		    
		    <div class="steps_wrap" v-if="info.processState==5">
					<van-steps direction="vertical" :active="4" active-color="#FFD630" class="">
					  <van-step>
					    <div class="word1">买家申请客服介入</div>
					    <div class='word2'>{{info.addtime}}</div>
					  </van-step>
					  <van-step>
					    <div class="word1">等待买家上传凭证</div>
					    <div>
					    	<div>
						    	<span class='word3'>请上传凭证：【退货快递单和双方协商一致的 聊天记录】</span>
						    	<span class='word4' @click="seePz" v-if="info.refundImg">查看凭证</span>			    		
					    	</div>
					    	<div class='word3'>提交后小二将根据您的凭证做出处理 逾期未提交，申请将自动关闭</div>
					    </div>
					  </van-step>		  				  
					  <van-step>
					    <div class='word1'>卖家处理</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>分配小二</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>集市小法庭处理中</div>
					  </van-step>
					  <van-step>
					    <div class='word1'>维权完结</div>
					  </van-step>			  
					</van-steps>
			  </div>
		</van-popup>	 
  </div>
</template>

<script>
import { getFun } from "@/api/publicFun.js";
let publicFun = getFun();
export default {
  data() {
    return {
    	showStatus:false
    };
  },
  props:{
  	info:{
  		type:Object,
  		default:()=>{}
  	}
  },
  methods: {
     showWin(){
     	 this.showStatus=true
     },
     seePz(){
     	  this.showStatus=false
     	  this.$emit('seePz')
     }
  },
  mixins: [publicFun], //混入
  mounted() {

  }
};
</script>

<style scoped="">
.steps_wrap{display: flex;align-items: center;}
.word1{color: #333;font-size: 13px;margin-bottom: 13px;}
.word2{color: #999;font-size: 12px;}
.word3{color: #333;font-size: 12px;}
.word4{color: #3CACEC;font-size: 12px;}
</style>